<template>
<div class="wrap">
<xcl-header :page-title="pageTitle" :call-back="callBack" :header-right="headerRight"></xcl-header>
<xcl-footer></xcl-footer>

<div class="content">
	 <div class="list-block media-list" style="margin:0">
	    <ul>
	      <li>
	        <a v-link="{path:'/User/Setting'}" class="item-link item-content">
	          <div class="item-media"><img :src="user.img" style='width: 3.6rem;border-radius: 50%;'></div>
	          <div class="item-inner">
	            <div class="item-title-row">
	              <div class="item-title" style="line-height: 4.5rem;">{{user.nickName}}</div>
	            </div>
	          </div>
	        </a>
	      </li>
	    </ul>
	  </div>
	<div class="list-block">
	    <ul>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title">资产总额</div>
	          <div class="item-after">{{account.totalMoney | formatMoney }}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title">投资总额</div>
	          <div class="item-after">{{account.investMoney | formatMoney }}</div>
	        </div>
	      </li>
	      <li class="item-content">
	        <div class="item-inner">
	          <div class="item-title">累计收益</div>
	          <div v-if="account.totalIncome>=0" class="item-after" style="color:#E76364">{{account.totalIncome | formatMoney }}</div>
	          <div v-else class="item-after" style="color:#11B864">{{account.totalIncome | formatMoney }}</div>
	        </div>
	      </li>
	    </ul>
	</div>
	
	<div class="list-block">
	    <ul>
	      <li class="item-content item-link">
	        <div class="item-media"><i class="icon icon-icdingdan"></i></div>
	        <div class="item-inner" style="margin-left:0.4rem" v-link="{path:'/User/MyOrder'}">
	          <div class="item-title" >我的订单</div>
	          <div class="item-after"></div>
	        </div>
	      </li>
	      <li class="item-content item-link">
	        <div class="item-media"><i class="icon icon-ictongzhi"></i></div>
	        <div class="item-inner" style="margin-left:0.4rem" v-link="{path:'/User/MyNotice'}" @click="clearNewMessage">
	          <div class="item-title">消息通知</div>
	          <div class="item-after message-account" v-if="newMessage.show" style="color:#fff">{{newMessage.count}}</div>
	        </div>
	      </li>
	      <li class="item-content item-link">
	        <div class="item-media"><i class="icon icon-icgonggao"></i></div>
	        <div class="item-inner" style="margin-left:0.4rem"  v-link="{path:'/User/MyBulltin'}">
	          <div class="item-title">系统公告</div>
	          <div class="item-after"></div>
	        </div>
	      </li>
	    </ul>
  	</div>
  	<div class="content-block-title">我的产品</div>
	<div v-if="myProducts.length == 0" class="no-data card">暂无数据</div>
  	<div class="card" v-for="p in myProducts" v-link="{ name:'MyProductView', params:{SId: p.psid}}">
	    <div class="card-header">
	    	{{p.pn}}
	    	<div class="pull-right" style="font-size: 0.7rem;">当前净值：{{p.tn | formatNumber 4}}</div>
	    </div>
	    <div class="card-content">
	      	<div class="card-content-inner">
	          <div class="row text-center">
	            <div class="col-33">
	                <div>投资金额</div>
	                <div>{{p.i | formatMoney}}</div>
	            </div>
	            <div class="col-33">
	                <div>当前市值</div>

	                <div>{{(p.ti+p.pn1*p.pn2) | formatMoney}}</div>
	            </div>
	            <div class="col-33">
	                <div>收益率</div>
	                <div :style="{color:(p.ti+p.pn1*p.pn2-p.i)>=0?'red':'green'}">{{(p.ti+p.pn1*p.pn2-p.i)/p.i*100 | formatNumber}}%</div>
	            </div>
	          </div>
	      	</div>
	    </div>
    <div class="card-footer" v-if="p.s!=5">
    	<span :class="{'product-s2':true,'product-status-bg1':p.s==4,'product-status-bg2':p.s==6,'product-status-bg3':p.s!=4&&p.s!=6}">{{p.s | getProductStatus}}</span>
    </div>
     <div class="card-footer" v-else>
    	<span :class="{'product-s2':true,'product-status-bg3':true}">{{p.otb | getLastTimeStr false 'MM月dd日'}}开放</span>
    </div>
  </div>

</div>

  <xcl-loading :show="loading.show"></xcl-loading>
  <xcl-alert :show="alertCom.show" :show-content="alertCom.content" :confirm-fn="alertCom.confirmFn"  :cancle-fn="alertCom.cancleFn" :alert-title="alertCom.title" transition="fade"></xcl-alert>
  </div>
</template>
<script>
import xclHeader from '../components/header.vue'
import xclFooter from '../components/footer.vue'
import xclLoading from '../components/loading.vue'
 import xclAlert from '../components/xclAlert.vue'
let UserProxy =  require("../proxy/user_proxy");
let User = new UserProxy();
let ProductProxy =  require("../proxy/product_proxy");
let Product = new ProductProxy();
let MessageProxy =  require("../proxy/message_proxy");
let Message = new MessageProxy();
  export default {
        data (){
            return {
                scroll:true,
                pageTitle:'我的',
                headerRight:'退出',
                user:{
                	nickName:localStorage.nickName,
                	img:'/src/asserts/images/user.png'
                }, 
                account:{
                	totalMoney:0,
                	investMoney:0,
                	totalIncome:0
                }, 
                myProducts:[],            
                	loading:{
                    show:false
                },
                newMessage:{
                	show:false,
                	count:0
                },
                alertCom:{
                    show:false,
                    content:'您确定要退出吗？',
                    title:'退出',
                    confirmFn:()=>{},
                    cancleFn:()=>{}
                }
            }
        },
        methods:{
        	callBack(){
        			let _this = this;
        			this.alertCom.show = true;
        			this.alertCom.cancleFn = function(){
        			    _this.alertCom.show = false;
        			},
        			this.alertCom.confirmFn = function(){
        				window.localStorage.removeItem("token");
                		_this.$router.go('/Login');
        			}
            },
        	getNewMessage(){
        		var _this = this;
        		User.getUserSmartInfo(localStorage.token,(d)=>{
        			if (d.code == 200 && d.results && d.results[0].nmc > 0) {
		                _this.newMessage={
		                	show:true,
		                	count:d.results[0].nmc
		                }
		            }
        		});
        	},
        	clearNewMessage(){
        		var _this = this;
        		if(!_this.newMessage.show)return false;
        		Message.setMyAllMessageRead(localStorage.token,1,function(data){
					if(data.code==200){
						console.log('cleared all messages');
				 	}
				});
        	},
        	getAccount(){
        		var _this = this;
        		User.getAccount(localStorage.token,(d)=>{
        			if(d.code == 200 && d.results && d.results.length){
        				this.account={
        					totalMoney:d.results[0].ca,
		                	investMoney:d.results[0].ti,
		                	totalIncome:d.results[0].ci1
        				}
        			}else if(d.code == 4090){
        				window.localStorage.removeItem("token");
                		_this.$router.go('/Login');
        			}
        		});
        	},
        	getMyProducts(){
        		var _this = this;
        		_this.loading.show = true;
        		Product.getMyProduct(localStorage.token,0,1e18,0,1,20,(d)=>{
        			if(d.code == 200 && d.results && d.results.length){
        				_this.myProducts = _this.myProducts.concat(d.results);
        			}else if(d.code == 4090){
        				window.localStorage.removeItem("token");
                		_this.$router.go('/Login');
        			}
        			_this.loading.show = false;
        		});
        	}
        },
        ready(){
        	this.getAccount();
        	this.getMyProducts();
        	this.getNewMessage();
        },
        components:{
           "xclHeader":xclHeader,
           "xclFooter":xclFooter,
           "xclLoading":xclLoading,
           "xclAlert":xclAlert
        }
  }
</script>
<style lang="stylus">
	.message-account
		padding:0 0.3rem
		background-color:red
		border-radius:0.5rem
		font-size:0.5rem
	.product-s2
		text-align:center
		padding:.2em
		width 100%
		-webkit-box-flex 1

</style>